<template>
  <a-modal
    :visible="visible"
    title="实训室设备预约"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="emName" label="设备名称" name="emName">
        <a-input v-model:value="formState.emName" disabled />
      </a-form-item>
      <a-form-item ref="lainName" label="所属实训室" name="lainName">
        <a-input v-model:value="formState.lainName" disabled />
      </a-form-item>
      <a-form-item ref="emNumber" label="剩余数量" name="emNumber">
        <a-input type="emNumber" v-model:value="formState.emNumber" disabled/>
      </a-form-item>
      <a-form-item label="实训室预约" name="standby5">
        <a-select v-model:value="formState.standby5">
          <a-select-option :value="post.id" v-bind:key="index" v-for="(post,index) in dataValues">{{post.standby3}}-{{post.taState}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item ref="standby3" label="申请用途" name="standby3">
        <a-input v-model:value="formState.standby3" />
      </a-form-item>
      <a-form-item ref="taNumber" label="申请数量" name="standby1">
        <a-input-number v-model:value="formState.standby1" :min="1" :max="formState.emNumber"/>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" />
      </a-form-item>
    </a-form>
  </a-modal>

</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message } from 'ant-design-vue';
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
import {applyList_equiment, subscribe, subscribeEquiment} from "@/api/module/TrainingApply";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    }
  },
  emit: ["close"],
  setup(props, context) {

    const formRef = ref();
    // 时间绑定
    let dataValues = ref([]);

    const formState = reactive({});

    watch(props,(props)=>{
      console.log("实验室预约：",toRaw(props.record))
      formState.emName = props.record.emName;
      formState.id = props.record.id;
      formState.lainName = props.record.lainName;
      formState.emNumber = props.record.emNumber;
      formState.liId = props.record.liId;
      loadPost(props.record.liId,props.record.id);
    })

    const submit = (e) => {
      formRef.value
        .validate()
        .then(() => {
          subscribeEquiment(toRaw(formState)).then((response)=>{
            if(response.success){
              message.success({ content: '预约成功', duration: 1 }).then(()=>{
                cancel();
              });
            }else{
              message.error({ content: '预约失败,原因是：'+response.msg, duration: 1 }).then(()=>{
                cancel();
              });
            }
          });
        })
        .catch(error => {
          console.log('error', error);
        });
    };

    const cancel = (e) => {
      formRef.value.resetFields();
      context.emit("close", false);
    };

    // 查询实验室预约列表
    const loadPost = (liId,id) => {
      const param = {
        taName: liId,
        // id: id,
        taType: 0,
      }
      applyList_equiment(param).then((response)=>{
        dataValues.value = response.data;
      });
    }


    return {
      submit,
      cancel,
      formRef,
      formState,
      dataValues,
      locale,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
  },
});
</script>
